<template>
  <el-config-provider
    :locale="locales"
    :size="c.size"
    :zIndex="c.zIndex"
    :button="c.button"
    :message="c.message"
  >
    <router-view />
  </el-config-provider>
</template>
<script>
export default {
  name: "App",
};
</script>
<script setup>
import { reactive, computed } from "vue";
import { useI18n } from "vue-i18n";
import config from "@/config";
import colorTool from "@/utils/color";
import tool from "./utils/tool";
const i18n = useI18n();

const c = reactive({
  size: "default",
  zIndex: 2000,
  button: {
    autoInsertSpace: false,
  },
  message: 1,
});
const locales = computed(() => {
  return i18n.messages.value[i18n.locale.value].el;
});

//初始化
function init() {
  //设置主题颜色
  const app_color = config.COLOR || tool.data.get("APP_COLOR");
  if (app_color) {
    document.documentElement.style.setProperty("--el-color-primary", app_color);
    for (let i = 1; i <= 9; i++) {
      document.documentElement.style.setProperty(
        `--el-color-primary-light-${i}`,
        colorTool.lighten(app_color, i / 10)
      );
    }
    for (let i = 1; i <= 9; i++) {
      document.documentElement.style.setProperty(
        `--el-color-primary-dark-${i}`,
        colorTool.darken(app_color, i / 10)
      );
    }
  }
}
init();
</script>

<style lang="scss">
@import "@/style/style.scss";
</style>
